<script setup lang='ts'>
import { toRefs } from 'vue'
import { useTodoStore } from '@/stores/todoStore'

const todoStore = useTodoStore()
const { value } = toRefs(todoStore)

const addTodoItem = () => {
  todoStore.addTodoItem()
}
</script>

<template>
    <el-input class='todoInput'  v-model='value'  type="text" placeholder='请输入待办事项,回车确认' />
    <el-button class='todoAddButton' type='primary' @click='addTodoItem'>添加</el-button>
</template>
  
<style lang='scss' scoped>
.todoInput {
  width: 400px;
  height: 35px;
}

.todoAddButton {
  width: 100px;
  height: 35px;
  color: #fff;
  margin-left: 0;
  // background: #1171cb;
  border: none;
  cursor: pointer;
  font-size: 16px;
  outline: none;
}

</style>